<template>
  <div
    class="xitongpeizhi"
    style="padding:0.8rem 0.5rem 1rem; background: #fff; min-height: 100vh; position: relative;"
  >
    <div style="color: rgb(2, 12, 29); font-size: 0.36rem;text-align: center;">更换手机号</div>
    <div
      style="color: rgb(64, 66, 71); font-size: 0.28rem; text-align: center; margin: 20px 0 50px;"
    >一个手机只能绑定一个帐号，更换后可使用新手机号登录此帐号。对于已绑定其他账号的手机号，本次操作后将与原帐号解绑。</div>
    <div style="border-bottom: 1px solid #ebedf0; border-top: 1px solid #ebedf0;">
      <van-field
        v-model="address"
        is-link
        readonly
        name="picker"
        label="国家/地区"
        @click="showPicker = true"
      />
    </div>
    <div style="border-bottom: 1px solid #ebedf0; ">
      <van-field v-model="info.mobile" type="tel" placeholder="请输入手机号" label="手机号"></van-field>
    </div>
    <div style="border-bottom: 1px solid #ebedf0; position: relative; ">
      <van-field v-model="info.sms_code" type="tel" placeholder="请输入验证码" label="验证码" />
      <div
        @click="getcode"
        style="position: absolute; right: 10px; top: 15px; font-size: 12px;"
      >{{ codemsg }}</div>
    </div>

    <div
      @click="genghuan"
      style="background: rgb(0, 90, 255); color: #fff; height: 0.9rem; border-radius:0.5rem; font-size: 0.38rem; position: absolute; bottom: 0.5rem; width: 6.5rem; left: 0.5rem;"
      class="flexcc"
    >确定</div>

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
        show-toolbar
      />
    </van-popup>
  </div>
</template>

<script>
var h = document.documentElement.clientWidth / 7.5 + "px";
document.documentElement.style.fontSize = h;
export default {
  name: "huanshoujihao",
  data() {
    return {
      address: "中国大陆",
      info: {
        mobile: "",
        type: 1
      },
      columns: ["中国大陆"],
      showPicker: false,

      codemsg: "获取验证码"
    };
  },
  created() {},
  mounted() {},
  methods: {
    onConfirm: function(val) {
      this.address = val;
      this.showPicker = false;
    },

    genghuan: function() {
      axios.post("/own/sms/change/bind", this.info).then(response => {
        if (response.data.msg.code == 0) {
          vant.Toast("操作成功");
          this.$router.back(-1);
        } else {
          vant.Toast(response.data.msg.info);
        }
      });
    },

    //获取验证码
    getcode() {
      if (this.info.mobile.length != 11) {
        vant.Toast("请输入手机号");
        return false;
      }
      if (this.codemsg == "获取验证码") {
        this.codemsg = 60;

        var time = setInterval(() => {
          if (this.codemsg > 0) {
            this.codemsg--;
          } else {
            this.codemsg = "获取验证码";
            clearInterval(time);
          }
        }, 1000);

        axios
          .post("/api/user/change/bind/code/send", {
            mobile: this.info.mobile,
            type: this.info.type
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              vant.Toast("发送成功");
            } else {
              vant.Toast(response.data.msg.info);
            }
          });
      }
    }
  }
};
</script>


<style scoped lang="less">
</style>
